<template>
  <div id="login">
    <el-card style="width: 600px; height: 300px;
                    margin: 0 auto; background-color: rgba(255,255,255,0.3);
                    position: relative;
                    top: 170px">
      <h1>欢迎来到拼团团用户后台</h1>
      <!--label-width设置文本所占的宽度如果不设置,文本单独显示一行-->
      <el-form label-width="60px" style="width: 400px;margin: 50px auto">
        <el-form-item label="用户名">
          <el-input type="text" v-model="user.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" @keydown.native.enter="login()" v-model="user.password"
                    placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label-width="0">
          <!--让某一个元素位置进行微调时 使用相对定位-->
          <el-button type="primary" @click="login()">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      user: {}
    }
  },
  methods: {
    login() {
      this.$axios
          .post("http://localhost:8250/users/login", this.user)
          .then(res => {
            let data = res.data
            if (data.state === 20000) {
              let user = data.data
              localStorage.setItem('jwt', user.jwt)
              localStorage.setItem('userid', user.id)
              localStorage.setItem('username', user.username)
              this.$router.push({path: '/'})
              this.$message.success('登录成功!')
            } else {
              this.$alert(data.message, '警告', {
                confirmButtonText: '确定',
                callback: action => {console.log('关闭弹窗')}
              })
            }
          })

    }
  }
}
</script>

<style scoped>
#login {
  position: relative;
  text-align: center;
  background: rgba(62, 167, 76, 0.7);
  height: 721px;
}
</style>
